// ********************

<template>

    <div class="trading-and-work">
        <div class="trading-and-work-main">
            <div class="item" v-for="item in list" :key="item.code">
                <h3>{{item.city}}</h3>
                <div class="city">
                    <el-link v-for="city in item.children" :key="city.code" :underline="false" @click="detail(city)">
                        <el-tooltip placement="top" effect="light" :content="city.city">
                            <span>{{city.city}}</span>
                        </el-tooltip>
                    </el-link>
                </div>
            </div>
        </div>

        <transition name="el-fade-in-linear">
            <div class="arrow" v-show="arrowShow">
                <div class="left" v-show="leftArrowShow">
                    <el-button type="text" icon="el-icon-arrow-left" @click="left"></el-button>
                </div>
                <!-- 占位div 勿删 -->
                <div></div>

                <div class="right" v-show="rightArrowShow">
                    <el-button type="text" icon="el-icon-arrow-right" @click="right"></el-button>
                </div>
            </div>
        </transition>

        <el-dialog class="taw-dialog" title="" :visible.sync="dialogVisible" destroy-on-close width="1000px">
            <trading-detail v-bind="currentCity"></trading-detail>
        </el-dialog>
    </div>
</template>

<script>
import mockCitys from '../json/city.json';
import tradingDetail from '../components/detail.vue';
import { mapState, mapGetters } from 'vuex';
export default {
    head: {},
    props: {},
    components: {
        tradingDetail,
    },
    data: () => ({
        list: [],
        dialogVisible: false,
        currentCity: {},
        arrowShow: false,
        leftArrowShow: false,
        rightArrowShow: true,
        targetData: {},
    }),
    computed: {
        ...mapState({
            cityName: state => state.city.usersCityName,
        }),
        ...mapGetters({
            navigateData: 'navigate/navigateData',
        }),
    },
    watch: {
        cityName: {
            handler(n, o) {
                this.sortCity(n);
            },
            // immediate:true
        },
        navigateData: {
            handler(n, o) {
                this.getData();
            },
            deep: true,
            // immediate:true
        },
    },
    methods: {
        getData() {
            this.list = clone(this.navigateData.jyzxlist.children);
        },
        setWheel() {
            const that = this;
            var tabsContainer = document.querySelector('.trading-and-work-main');
            tabsContainer.addEventListener('wheel', (event) => {
                event.preventDefault();
                tabsContainer.scrollLeft += event.deltaY;
            });

            var mainWork = document.querySelector('.trading-and-work');
            mainWork.onmouseover = function () {
                that.arrowShow = true;
            };

            mainWork.onmouseout = function () {
                that.arrowShow = false;
            };
        },
        /**
         * 详情
         * @param {Object} item 所点击对象
         */
        detail(item) {
            this.currentCity = item;
            this.point(item);
            this.dialogVisible = true;
        },
        /**
         * 埋点
         */
        point(item) {
            this.$ajax({
                type: 'post',
                url: `${this.$store.state.api.tbUrl}/home/navigateclick.json`,
                data: {
                    type: item.type,
                    id: item.code,
                },
                callback: function (data, res) {},
                error: function () {},
            });
        },
        /**
         * 城市排序
         */
        sortCity(cityname) {
            const that = this;
            // 1.按照a-z排序
            // 2.取出符合的一项，
            // 3.插入到第一个
            this.list.sort((a, b) => {
                return a.city.localeCompare(b.city, 'zh'); //a~z 排序
            });
            for (let i = 0; i < that.list.length; i++) {
                if (that.list[i].city == cityname) {
                    that.targetData = that.list[i];
                    that.list.splice(i, 1);
                    break;
                }
            }
            that.list.unshift(that.targetData);
            // 更新vuex

            
           
            // console.log( that.navigateData);
            // let navData = clone(that.navigateData);
            // console.log(navData);
            // navData.jyzxlist.children = that.list;
            // console.log( navData);
            // this.$store.commit('navigate/updateNavigateData', navData);
            // console.log(this.navigateData.jyzxlist.children);

           
     

            // this.list.map((item) => item.city);
            //同时有两个排序，导致结果混乱
            // this.list.sort(function(a,b){
            //     if(a.city == cityname){
            //         return -1
            //     }else {
            //         let city2 = a.city.localeCompare(b.city, 'zh');//a~z 排序
            //         return city2
            //     }
            // })

            var navItem = document.querySelector('.trading-and-work-main');
            navItem.scrollLeft = 0;
            this.leftArrowShow = false;
        },
        left() {
            var navItem = document.querySelector('.trading-and-work-main');
            navItem.scrollLeft -= 300;
            if (navItem.scrollLeft == 0) {
                this.leftArrowShow = false;
                this.rightArrowShow = true;
            } else {
                this.rightArrowShow = true;
            }
        
        },
        right() {
            var navItem = document.querySelector('.trading-and-work-main');
            navItem.scrollLeft += 300;
            var res = navItem.scrollLeft == navItem.scrollWidth - navItem.clientWidth ? true : false;
            if (res) {
                this.rightArrowShow = false;
                this.leftArrowShow = true;
            } else {
                this.leftArrowShow = true;
            }
            // console.log("左" + navItem.scrollLeft);
            // console.log(navItem.scrollWidth - navItem.clientWidth);
        },
    },
    mounted() {
        this.getData();
        this.setWheel();
         this.sortCity(this.cityName);
        
    },
    beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.trading-and-work {
    position: relative;
    padding: 0 20px;

    ::v-deep .el-dialog__header {
        padding-bottom: 20px;
    }
    ::v-deep .el-dialog__body {
        padding-top: 20px;
    }

    .arrow {
        position: absolute;
        width: 100%;
        top: 0px;
        left: 0px;
        display: flex;
        justify-content: space-between;

        ::v-deep .el-button {
            font-weight: 800;
            font-size: 20px;
            padding-top: 10px;
        }
    }

    .trading-and-work-main {
        display: flex;
        overflow: auto;
        overflow-x: hidden;

        .item {
            height: 240px;
            // background-color: #ccc;
            border-right: 1px solid #eeeeee;
            margin: 10px;

            &:last-child {
                border: none;
            }

            h3 {
                text-align: center;
            }

            .city {
                height: 210px;
                margin-top: 12px;
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                writing-mode: vertical-lr;

                ::v-deep .el-link {
                    writing-mode: horizontal-tb;
                    line-height: 24px;
                    display: block;
                    width: 67px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>
